import React, { Component } from 'react';
import {shopcartlist,subShopcart,addShopcart} from '../../utils/api'
import {Toast} from 'antd-mobile'

class Mylist extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            count:0
        }
    }
    componentDidMount() {
        this.setState({
            list: []
        })
        //获取购物车列表
        shopcartlist({userid:localStorage.getItem('userid')}).then((res)=>{
           this.setState({
            list:res.data.list
           })
        })
    }
    //点击购物车数量减一
    handleSubcart(id){
        // console.log(id);
        subShopcart({userid:localStorage.getItem('userid'), goodid:id}).then((res)=>{
            //   console.log(res);
              shopcartlist({userid:localStorage.getItem('userid')}).then((res)=>{
                this.setState({
                 list:res.data.list
                })
             })
        })
    }
    
    //点击购物车数量加一
    handleAddcart(id){
        addShopcart({userid:localStorage.getItem('userid'),goodid:id}).then((res)=>{
            // console.log(res);
            shopcartlist({userid:localStorage.getItem('userid')}).then((res)=>{
                this.setState({
                 list:res.data.list
                })
             })
        })
    }
    render() {
        return (
            <div className='shopcartlist'>
                {
                    this.state.list && this.state.list.length > 0  && this.state.list.map((item,index)=>{
                        return (
                            <div className='list' key={index}>
                                <div className='input'><input type="checkbox" name='checked'/></div>
                                <div className='img-box'>
                                    <img src={item.pic} alt="" />
                                </div>
                                <div className='text'>
                                    <div className='name'>{item.name}</div>
                                    <div className='post'><span>{item.salesPrice.name}</span></div>
                                    <div className='discount'><span>{item.activityTags}</span></div>
                                    <div className='notice'><span>{item.description}</span></div>
                                    <div className='last'>
                                        <div className='price'>{item.salesPrice.value}</div>
                                        <div className='count'>
                                            <button onClick={()=>{this.handleSubcart(item.id,Toast.show({icon:'success',content:'数量已减1'}))}}>-</button>
                                            <span>{item.count}</span>
                                            <button onClick={()=>{this.handleAddcart(item.id,Toast.show({icon:'success',content:'数量已加1'}))}}>+</button>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default Mylist;